<template>
  <div>
    <div class="p-2" @click="menuHide">
      <el-row :gutter="24">
        <!-- 树 -->
        <el-col :lg="5" :xs="24">
          <el-card shadow="hover">
            <el-tree
              class="mt-2"
              ref="deptTreeRef"
              node-key="id"
              :data="personGroupList"
              :props="{ label: 'groupName', children: 'children' }"
              :expand-on-click-node="false"
              default-expand-all
              :current-node-key="currentNodeKey"
              highlight-current
              @node-contextmenu.prevent="openContextMenu"
              @node-click="handleNodeClick"
            />
          </el-card>
        </el-col>
        <el-col :lg="19" :xs="24">
          <div style="background: #fff; padding: 10px 20px">
            <member-list
              ref="memberListRef"
              :parent-id="currentNodeData.parentId"
              :group-id="currentNodeData.groupId"
              :group-type="currentNodeData.groupType"
            ></member-list>
          </div>
        </el-col>
      </el-row>
      <div v-show="showMenu" class="custom-menu" v-hasPermi="['dormitory:buildingTree:setting']">
        <ul>
          <li @click="menuItemAdd" v-show="currentNodeData.parentId===0">新增分组</li>
          <li @click="menuItemUpdate">修改</li>
          <li @click="menuItemDelete" v-show="!currentNodeData.isSystem">删除</li>
          <li @click="menuHide">取消</li>
        </ul>
      </div>
      <group-dialog ref="groupDialog" @onSuccess="reloadDatas"></group-dialog>
    </div>
  </div>
</template>

<script setup name="PersonGroup" lang="ts">
import { listPersonGroup, getPersonGroup } from '@/api/device/personGroup';
import { PersonGroupVO, PersonGroupQuery, PersonGroupForm } from '@/api/device/personGroup/types';
import MemberList from './modules/MemberList.vue';
import GroupDialog from './modules/GroupDialog.vue';

type PersonGroupOption = {
  groupId: number;
  groupName: string;
  children?: PersonGroupOption[];
};

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const personGroupList = ref<PersonGroupVO[]>([]);
const personGroupOptions = ref<PersonGroupOption[]>([]);
const loading = ref(false);
const showMenu = ref(false);
const listType = ref(1);
const groupDialog = ref<InstanceType<typeof GroupDialog>>();
const memberListRef = ref<InstanceType<typeof MemberList>>();
const queryFormRef = ref<ElFormInstance>();
const personGroupFormRef = ref<ElFormInstance>();
const currentNodeKey = ref();
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: PersonGroupForm = {
  groupId: undefined,
  parentId: undefined,
  ancestors: undefined,
  groupName: undefined,
  groupType: undefined,
  isSystem: undefined,
  orderNum: undefined,
  status: undefined,
  remark: undefined
};

const data = reactive<PageData<PersonGroupForm, PersonGroupQuery>>({
  form: { ...initFormData },
  queryParams: {
    parentId: undefined,
    ancestors: undefined,
    groupName: undefined,
    groupType: undefined,
    isSystem: undefined,
    orderNum: undefined,
    status: undefined,
    params: {}
  },
  rules: {}
});

const { queryParams, form } = toRefs(data);

/** 查询通行人员分组列表 */
const getList = async () => {
  loading.value = true;
  const res = await listPersonGroup(queryParams.value);
  const data = proxy?.handleTree<PersonGroupVO>(res.data, 'groupId', 'parentId');
  if (data) {
    personGroupList.value = data;
    loading.value = false;
    handleNodeClick(data[0].children[0]);
  }
};

/** 查询通行人员分组下拉树结构 */
const getTreeselect = async () => {
  const res = await listPersonGroup();
  personGroupOptions.value = [];
  const data: PersonGroupOption = { groupId: 0, groupName: '顶级节点', children: [] };
  data.children = proxy?.handleTree<PersonGroupOption>(res.data, 'groupId', 'parentId');
  personGroupOptions.value.push(data);
};

// 取消按钮
const cancel = () => {
  reset();
  dialog.visible = false;
};

// 表单重置
const reset = () => {
  form.value = { ...initFormData };
  personGroupFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 节点单击事件 */
const handleNodeClick = (data: any) => {
  menuHide(data);
  if (data.groupType) {
    currentNodeKey.value = data.groupId;
    currentNodeData.value = data;
    listType.value = data.groupType;
    loadList();
  }
};
const currentNodeData = ref<any>({});
const openContextMenu = (event: any, nodeData: any) => {
  // 设置菜单的位置
  const menu = proxy?.$el.querySelector('.custom-menu');
  const clickX = event.clientX;
  const clickY = event.clientY;
  menu.style.left = clickX + 10 + 'px';
  menu.style.top = clickY + 'px';
  currentNodeData.value = nodeData;
  showMenu.value = true;
};

const menuItemAdd = (option: any) => {
  showMenu.value = false;
  groupDialog.value?.handleAdd(currentNodeData.value);
};

const menuItemUpdate = (option: any) => {
  showMenu.value = false;
  groupDialog.value?.handleUpdate(currentNodeData.value);
};

const menuItemDelete = async () => {
  showMenu.value = false;
  groupDialog.value?.handleDelete(currentNodeData.value);
};

const menuHide = (option: any) => {
  showMenu.value = false;
};

const loadList = () => {
  const data = currentNodeData.value;
  switch (listType.value) {
    case 1:
      break;
    case 2:
      break;
    case 3:
      break;
  }
  setTimeout(() => {
    memberListRef.value?.loadList();
  }, 1);
};

const reloadDatas = () => {
  getList();
  loadList();
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.custom-menu {
  position: fixed;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 1000;
}

.custom-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-menu ul li {
  padding: 8px 20px;
  cursor: pointer;
  font-size: 13px;
  color: $blue;
}

.custom-menu ul li:hover {
  background-color: #eee;
}
.ss-tabs {
  background-color: #fff;
}
</style>
